<template>
  <div ref="containerRef" class="container"></div>
</template>

<script setup lang="ts">
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';
import { DndPanel } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css';
import BaseTopoConnection from './base/BaseTopoConnection';
import Description from './components/data-display/Description';
import Table from './components/data-display/Table';
import Breaker from './components/electricity/Breaker';
import Triangle from './components/shape/Triangle';
import SceneManager from './core/SceneManager';
import TopoDesigner from './core/TopoDesigner';

import { fieView, render } from './service';

LogicFlow.use(DndPanel);

defineOptions({
  name: 'topoDesignerIndex',
});

const emits = defineEmits(['nodeSelected']);

const containerRef = ref<HTMLDivElement>();

onMounted(() => {
  const topoDesigner = new TopoDesigner({
    container: containerRef.value!,
    grid: {
      size: 20,
      visible: true,
      type: 'dot',
      config: {
        color: '#ababab',
        thickness: 1,
      },
    },
    background: {
      backgroundColor: 'rgb(26,26,26)',
    },
    style: {
      anchorLine: {
        stroke: '#fff',
      },
      arrow: {
        offset: 0,
        verticalLength: 0,
      },
    },
  });
  window.topoDesigner = topoDesigner;
  topoDesigner.register(BaseTopoConnection);
  topoDesigner.register(Breaker);
  topoDesigner.register(Triangle);
  topoDesigner.register(Description);
  topoDesigner.register(Table);
  topoDesigner.setDefaultEdgeType('BaseTopoConnection');

  topoDesigner.on('node:click', onNodeSelectionChange);
  topoDesigner.on('node:delete', onNodeSelectionChange);
  topoDesigner.on('node:add', () => {
    setTimeout(() => {
      onNodeSelectionChange();
    }, 0);
  });

  topoDesigner.on('blank:click', onNodeSelectionChange);

  SceneManager.init();

  render({
    nodes: [
      {
        id: 'Triangle',
        type: 'Triangle',
        x: 0,
        y: 200,
        text: '',
      },
      {
        id: 'Breaker',
        type: 'Breaker',
        x: 0,
        y: 300,
        text: '',
      },
      {
        id: 'description',
        type: 'Description',
        x: 100,
        y: 100,
        properties: {
          width: 120,
          height: 100,
          rowHeight: 24,
          fontSize: 16,
          title: '描述列表标题',
          columns: [
            { label: '姓名', value: 'name' },
            { label: '性别', value: 'gender', style: 'color:#f00;' },
          ],
          data: {
            name: '张三',
            gender: '男',
          },
        },
      },
      {
        id: 'table',
        type: 'Table',
        x: 340,
        y: 100,
        properties: {
          width: 300,
          height: 150,
          rowHeight: 24,
          fontSize: 12,
          title: '表格标题',
          rowsTotal: 3,
          columns: [
            { label: '属性名称', value: 'label', width: 120 },
            { label: '值', value: 'value', width: 120 },
            { label: '单位', value: 'unit', width: 60 },
          ],
          data: [
            {
              label: '当日发电量',
              value: '300000',
              unit: 'kWh',
            },
            {
              label: '当月发电量',
              value: '10000000',
              unit: 'kWh',
            },
            {
              label: '当年发电量',
              value: '120000000',
              unit: 'kWh',
            },
          ],
        },
      },
    ],
    edges: [],
  });
  fieView(500);
});

onBeforeUnmount(() => {
  SceneManager.dispose();
});

/**
 * 节点选中变化回调
 */
const onNodeSelectionChange = () => {
  if (!window.topoDesigner) {
    return;
  }
  const { nodes } = window.topoDesigner.getSelectElements();
  console.log('nodeSelected', nodes);
  emits('nodeSelected', nodes.length ? nodes[0] : null);
};
</script>

<style lang="less" scoped>
@import './styles/index.less';
.container {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.btn {
  margin-top: 20px;
}
</style>
